<template>
  <div id="digital-flop">
    <div
      class="digital-flop-item"
      v-for="(item, index) in digitalFlopData"
      :key="item.title"
    >
      <div class="digital-flop-title">{{ item.title }}</div>
      <div class="digital-flop">
        <dv-digital-flop
          :config="configData[index]"
          style="width: 100px; height: 50px"
        />
        <div class="unit">{{ item.unit }}</div>
      </div>
    </div>

    <dv-decoration-10 />
  </div>
</template>

<script setup lang="ts" name="DigitalFlop">
import { toRefs, PropType, ref, reactive } from 'vue'

const props = defineProps({
  tileData: {
    type: Object,
    required: true,
  }
})
let { tileData } = toRefs(props)

let digitalFlopData = reactive([
  {
    title: '检测瓷砖数',
    unit: '块'
  },
  {
    title: '优等品',
    unit: '块'
  },
  {
    title: '一级品',
    unit: '块'
  },
  {
    title: '不合格品',
    unit: '块'
  },
  {
    title: '不合格率',
    unit: '%'
  }
  // {
  //   title: '漏检率',
  //   config: {
  //     number: [this.randomExtend(5, 10)],
  //     content: '{nt}',
  //     textAlign: 'right',
  //     style: {
  //       fill: '#40faee',
  //       fontSize: 36,
  //       fontWeight: 'bold'
  //     }
  //   },
  //   unit: '%'
  // },
  // {
  //   title: '错检率',
  //   config: {
  //     number: [this.randomExtend(5, 10)],
  //     content: '{nt}',
  //     textAlign: 'right',
  //     style: {
  //       fill: '#4d99fc',
  //       fontSize: 36,
  //       fontWeight: 'bold'
  //     }
  //   },
  //   unit: '%'
  // }
])

let configData = ref([
  {
    number: [tileData.value.totalTileNum],
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#4d99fc',
      fontSize: 36,
      fontWeight: 'bold'
    }
  },
  {
    number: [tileData.value.superNum],
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#67C23A',
      fontSize: 36,
      fontWeight: 'bold'
    }
  },
  {
    number: [tileData.value.firstGradeNum],
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#E6A23C',
      fontSize: 36,
      fontWeight: 'bold'
    }
  },
  {
    number: [tileData.value.defectsNum],
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#F56C6C',
      fontSize: 36,
      fontWeight: 'bold'
    }
  },
  {
    number: [tileData.value.defectsRate * 100],
    content: '{nt}',
    textAlign: 'right',
    style: {
      fill: '#f46827',
      fontSize: 36,
      toFixed: 2,
      fontWeight: 'bold'
    }
  }
])
</script>

<style scoped>
#digital-flop {
  position: relative;
  height: 20%;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(6, 30, 93, 0.5);
}
.dv-decoration-10 {
  position: absolute;
  width: 95%;
  left: 2.5%;
  height: 5px;
  bottom: 0px;
}

.digital-flop-item {
  width: 11%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 3px solid rgb(6, 30, 93);
  border-right: 3px solid rgb(6, 30, 93);
}

.digital-flop-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.digital-flop {
  display: flex;
}

.unit {
  margin-left: 10px;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding-bottom: 13px;
}
</style>
